$(() => {
  let $width = $('#width'),
      $height = $('#height'),
      $btnCal = $('#calc'),
      $form   = $('#main'),
      $perimeter = $('#perimeter'),
      $widthValidate = $('#width-validate'),
      $heightValidate = $('#height-validate'),
      $area = $('#area');

    $forkMeGH.show("https://www.baidu.com")

$width.keypress((e) => {
  let key = e.key,
      val = e.target.value,
      pos = e.target.selectionStart;

  //if(/[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(key)) e.preventDefault();
  // 合法字符的规则
  // 合法字符：e
  // 在一个科学计数法的数字前面、中间和后面都不能再出现e
  val = val.slice(0,pos) + key + val.slice(pos,val.length);
  if(val.indexOf('e') !== -1) e.preventDefault();

  // 合法字符：.
  if(!/^(0|[1-9]\d*)(\.\d*)?((e|E)(\+|-)?\d+)?$/.test(val)) e.preventDefault();


  /*
  console.log(e.key);
  console.log(e.target);
  console.log(e.target.value);
  console.log(e.target.selectionStart);
  */
});

$height.keypress();

/*
  $form.focusout((e) => {
    console.log(e.target);
  });
*/

  $width.focusout(() => {
    if(!validate($width,$widthValidate)) {
      $width.select();
    }
  });

  $height.focusout(() => {
    if(!validate($height,$heightValidate)) {
      $height.select();
    }
  })



  $btnCal.click(() => {
    let w = Number($width.val()),
        h = Number($height.val());
  
    if(validate($width,$widthValidate) && validate($height,$heightValidate)){
      let p = (w + h)*2,
          a = w * h;
    
      $perimeter.val(p);
      $area.val(a);
    
    }
  });
});


function validate(input,output) {
  //is empty
  if(input.val() === ''){
    output.html('该字段不能为空');
    return false;
  } else {
    output.html('');
  }
  
  //is number
  let val = Number(input.val());

  if(isNaN(val)){
    output.html('该字段不是数值');
    return false;
  } else {
      output.html('');
  }

  //is +
  if(val < 0){
    output.html('该数值不能小于零');
    return false;
  } else {
    output.html('');
  }

  return true;

}
